<template>
  <div class="header">
    <div class="logo">
      <img src="../../../static/img/home/logo.png" alt="">
    </div>
    <div class="search">
      <input type="text" v-model="key">
      <button @click="search">搜索</button>
      <button class="cart" @click="toMyCart">购物车</button>
    </div>
    <div class="hotwords">
      <ul>
        <li class="" v-for="h in hotwordList"><a :href="h.info">{{h.tag}}</a></li>
      </ul>
    </div>
    <div class="navitems">
      <ul>
        <li><a href="#" class="fir">秒杀</a></li>
        <li><a href="#" class="fir">优惠券</a></li>
        <li><a href="#">PLUS会员</a></li>
        <li><a href="#">品牌闪购</a></li>
        <li><a href="#">拍卖</a></li>
        <li><a href="#">京东家电</a></li>
        <li><a href="#">京东超市</a></li>
        <li><a href="#">京东生鲜</a></li>
        <li><a href="#">京东国际</a></li>
        <li><a href="#">京东金融</a></li>
      </ul>
    </div>
    <div class="ma" id="ma" v-if="ma">
      <div class="dis" id="dis" @click="ma=false">x</div>
      <img src="../../../static/img/home/ma.png" alt="二维码">
    </div>
  </div>
</template>

<script>
  export default {
    name: "Search",
    data() {
      return {
        user:{},
        key:'',
        ma:true,
        hotwordList:[]
      }
    },
    methods:{
      search(){
        // this.goods.forEach(g => {
        //   if (g.name===this.key){
        //     this.$router.push('/commodity/'+ g.id)
        //   }
        // })
      },
      toMyCart(){
        const flag = this.loginValid();
        if (flag) {
          this.$router.push('/cart/')
          return false;
        }
        if (window.confirm("您未登录,前往登录吗?")) {
          this.$router.push('/login')
        } else {
          return false;
        }
      },
      loginValid() {
        const user = sessionStorage.getItem('user');
        if (user !== null) {
          this.user = JSON.parse(user);
        }
        return user !== null
      }
    },
    created() {
      //得到热词
      this.$axios.post('/dictionary/getDataByGroup?group=热词')
        .then(resp=>{
          const result = resp.data;
          if (result.code !== 'success'){
            this.$message.error(result.message);
            return
          }
          this.hotwordList = result.data;
        })
    }
  }
</script>

<style scoped>
  a {
    text-decoration-line: none;
  }

  .header {
    position: relative;
    width: 1265px;
    height: 141px;
    background-color: #fff;
    margin-bottom: 10px;
  }

  .header .logo {
    background-color: #fff;

    float: left;
    width: 348px;
    height: 141px;

  }

  .header .search {
    background-color: white;
    float: left;
    width: 670px;
    height: 60px;

  }

  .header .search input {
    background-color: #fff;

    outline: none;
    border: 2px solid red;
    float: left;
    height: 35px;
    width: 430px;
    margin: 21px 0 0 25px;
    text-indent: 10px;
  }

  .header .search button {
    border: none;
    background-color: red;
    color: white;
    float: left;
    height: 38px;
    width: 60px;
    margin-top: 21px;
  }

  .header .search .cart {
    border: 1px solid #eeeeee;
    color: red;
    background-color: white;
    float: left;
    height: 38px;
    width: 130px;
    margin-left: 20px;
  }

  .header .search .cart:hover {
    border-color: red;
  }

  .header .hotwords {
    float: left;
    width: 490px;
    height: 30px;
  }

  .header .hotwords ul {
    float: left;
    margin-left: 25px;
  }

  .header .hotwords ul li {
    float: left;
    list-style-type: none;
    font-size: 12px;
    margin: 5px 10px 0 0;


  }

  .header .hotwords ul li a {
    color: #999999;


  }

  .header .hotwords ul li a:hover {
    color: red;
  }

  .header .navitems {
    float: left;
    width: 810px;
    height: 51px;
  }

  .header .navitems ul {
    float: left;
    margin-left: 20px;
  }

  .header .navitems ul li {
    float: left;
    list-style-type: none;
    font-size: 15px;
    margin-right: 25px;
    margin-top: 23px;
  }

  .header .navitems ul li .fir {
    font-size: 15px;
    color: red;
    font-weight: bold;
  }

  .header .ma {
    position: absolute;
    width: 77px;
    height: 77px;
    top: 5px;
    right: 75px;
  }

  .header .ma .dis {
    cursor: pointer;
    position: absolute;
    top: -7px;
    left: -7px;
    font-size: 12px;
  }
</style>
